<template>
  <div class="container">
    <nav-bar style="background-color: #0689f4; color: #fff">
      <div slot="center">点检列表</div>
    </nav-bar>
    <div class="check content-top">
      <div class="van-title" style="margin: 5px"></div>
      <van-form @submit="onSubmit(checkInfo)">
        <van-field
          v-model="checkInfo.username"
          name="checkInfo.username"
          label="点检人员"
          placeholder="点检人员"
        />
        <van-field
          v-model="checkInfo.deviceName"
          name="checkInfo.deviceName"
          label="设备名称"
          placeholder="设备名称"
        />
        <van-field
          v-model="checkInfo.checkName"
          name="checkInfo.checkName"
          label="点检装置"
          placeholder="点检装置"
        />
        <van-field
          readonly
          clickable
          v-model="checkInfo.checkTime"
          name="checkInfo.checkTime"
          label="检查日期"
        />

        <van-cell-group
          style="margin-top: 2px"
          v-for="(info, index) in checkContent"
          :key="index"
        >
          <div class="content-title" style="font-size: 16px">
            {{ index + 1 }}.{{ info.STANDARD }}
          </div>
          <van-field label="状况">
            <template #input>
              <van-radio-group v-model="info.STATUS" direction="horizontal">
                <van-radio name="1">正常</van-radio>
                <van-radio name="2">异常</van-radio>
              </van-radio-group>
            </template>
          </van-field>

          <van-field
            v-model="info.MESSAGE"
            rows="1"
            autosize
            label="备注"
            type="textarea"
            placeholder="请输入备注"
          />
          <van-field name="uploader" label="上传照片">
            <template #input>
              <van-uploader
                v-model="info.IMG"
                :max-size="5 * 1024 * 1024"
                @oversize="onOversize"
                :after-read="afterRead"
              />
            </template>
          </van-field>
        </van-cell-group>

        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar.vue";
import {
  submitCheckInfo,
  getDeviceCheckContent,
  uploadImage,
  getDeviceName,
} from "../../../api/check";
export default {
  name: "checkList",
  components: {
    NavBar,
  },
  props: {},
  data() {
    return {
      showPicker: false,
      minDate: new Date(2021, 1, 1),
      maxDate: new Date(2024, 12, 30),
      currentDate: new Date(),
      checkInfo: {
        username: "测试点检员",
        checkName: "",
        checkId: "",
        deviceId: "",
        deviceName: "",
        checkTime: this.$moment().format("YYYY-MM-DD HH:mm:ss"),
      },
      checkContent: [],
    };
  },
  computed: {},
  watch: {},
  created() {
    const data = localStorage.getItem("deviceId");
    this.checkInfo.deviceId = JSON.parse(data);
    this.initCheckItem(this.checkInfo.deviceId);
    this.getDeviceCheckItem();
  },
  mounted() {},
  methods: {
    //获取设备的名字
    initCheckItem(deviceId) {
      getDeviceName(deviceId)
        .then((res) => {
          if (res.status === 200) {
            this.checkInfo.deviceName = res.data[0].DEVICENAME;
          } else {
            this.$toast("获取设备名字出错");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //根据 点检ID 获取相应的点检项目
    getDeviceCheckItem() {
      this.$store.commit("showLoading");
      // const arr = this.$route.params.info.split(":");
      // const checkInfo = arr[1];
      const checkInfo = "f2727750-7ec7-4670-826f-aac2e2d42d48";
      getDeviceCheckContent(checkInfo).then((res) => {
        console.log(res);
        if (res.status === 200) {
          if (res.data.length === 0) {
            this.$store.commit("hideLoading");
            this.$toast("该点装置未设置点检项");
            return;
          }
          this.$store.commit("hideLoading");
          this.checkInfo.checkName = res.data[0].ITEMNAME;
          this.checkInfo.checkId = res.data[0].PARENTID;
          for (const ele of res.data) {
            this.checkContent.push(ele);
          }
        } else {
          this.$store.commit("hideLoading");
          this.$toast("获取点检项出错");
        }
      });
    },

    onOversize(file) {
      console.log(file);
      this.$toast("文件大小不能超过 5M");
    },
    //上传照片
    afterRead(file) {
      file.status = "uploading";
      file.message = "上传中...";

      let formData = new FormData();
      formData.append("files", file.file);

      uploadImage(formData)
        .then((res) => {
          console.log(res);
          file.status = "done";
          file.url = res.data.imageUrl;
          file.message = "上传成功";
        })
        .catch((err) => {
          console.log(err);
          file.status = "failed";
          file.message = "上传失败";
        });
    },

    //提交点检项目
    onSubmit(values) {
      

      this.$store.commit("showLoading");
      let data = {Info:this.checkInfo,content:this.checkContent}
      submitCheckInfo(data)
        .then((res) => {
          console.log(res);
          if (res.status === 200) {
            this.$store.commit("hideLoading");

            this.$toast.success("提交成功！");
          } else {
            this.$store.commit("hideLoading");
            this.$toast("提交失败，请重新提交");
          }
        })
        .catch((err) => {
          console.log(err);
          this.$store.commit("hideLoading");
          this.$toast("服务器错误！");
        });
    },

    onConfirmStart(dateData) {
      console.log(dateData);
      var date = new Date(dateData);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var mi = date.getMinutes();
      mi = mi < 10 ? "0" + mi : mi;
      const time = y + "-" + m + "-" + d + " " + h + ":" + mi;
      this.checkInfo.checkTime = time;
      this.showPicker = false;
    },
    formatter(type, val) {
      if (type === "month") {
        return `${val}月`;
      } else if (type === "day") {
        return `${val}日`;
      } else if (type === "year") {
        return `${val}年`;
      }
      return val;
    },
  },
};
</script>

<style scoped lang="less">
.container {
  .check {
    .van-title {
      padding: 2px 16px 2px 16px;
      color: rgba(69, 90, 100, 0.6);
      font-size: 16px;
      font-weight: normal;
    }
    .content-title {
      display: flex;
      box-sizing: border-box;
      padding: 10px 16px;
      border-bottom: 1px solid #ebedf0;
    }
  }
}
</style>